<script setup lang="ts">
import store from "@/store";
import { ref, PropType, computed } from "vue";
import { ModuleType } from "@/type";
import XmlList from "@/components/xmlList/index.vue";

const props = defineProps({
  node: {
    type: Object as PropType<ModuleType>,
    default: () => {}
  },
  index: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(["copy-node", "delete-node", "group-node"]);

// 是否展开
const unfold = ref(true);
// 当前节点
const currentNode = computed(() => {
  return store.getters.currentNode;
});
/**
 * 是否展开
 */
const changeUnfold = () => {
  unfold.value = !unfold.value;
};
/**
 * 点击节点
 */
const nodeClick = () => {
  store.commit("setCurrentNode", props.node);
};
/**
 * 复制节点
 */
const copyNode = (node: ModuleType) => {
  emit("copy-node", node);
};
/**
 * 删除节点
 */
const deleteNode = (node: ModuleType) => {
  emit("delete-node", node);
};
/**
 * 组合节点
 */
const groupNode = (node: ModuleType) => {
  emit("group-node", node);
};
</script>

<template>
  <div
    :id="node.id"
    class="xml-node"
    :data-id="node.id"
    :data-layout="node.layout ? 'layout' : ''"
    :data-index="index"
    :class="node.id === currentNode.id ? 'xml-node-active' : ''"
    @click.stop="nodeClick"
  >
    <div class="xml-node-header">
      <div class="node-title">
        <i class="color-3" :class="node.icon"></i>
        <span class="color-3 f-s-16">{{ node.name }}</span>
        <span v-if="node.value" class="color-7 f-s-14">：{{ node.value }}</span>
      </div>
      <div class="node-actions">
        <template v-if="node.layout">
          <el-tooltip v-if="unfold" effect="dark" placement="top" content="折叠">
            <button class="node-action" @click="changeUnfold">
              <i class="fas fa-minus"></i>
            </button>
          </el-tooltip>
          <el-tooltip v-else effect="dark" placement="top" content="展开">
            <button class="node-action" @click="changeUnfold">
              <i class="fas fa-plus"></i>
            </button>
          </el-tooltip>
        </template>
        <el-tooltip effect="dark" placement="top" content="复制">
          <button class="node-action" @click="copyNode(node)">
            <i class="fas fa-copy"></i>
          </button>
        </el-tooltip>
        <el-tooltip effect="dark" placement="top" content="删除">
          <button class="node-action" @click="deleteNode(node)">
            <i class="fas fa-trash"></i>
          </button>
        </el-tooltip>
        <el-tooltip v-if="node.layout && node.children.length" effect="dark" placement="top" content="组合">
          <button class="node-action" @click="groupNode(node)">
            <i class="fas fa-object-group"></i>
          </button>
        </el-tooltip>
        <el-tooltip effect="dark" placement="top" content="移动">
          <button class="node-action node-move">
            <i class="fas fa-arrows"></i>
          </button>
        </el-tooltip>
      </div>
    </div>
    <div v-if="node.layout && unfold" class="xml-node-content">
      <XmlList :list="node.children" @copy-node="copyNode" @delete-node="deleteNode" @group-node="groupNode" />
    </div>
  </div>
</template>
